<template>
  <!--入住记录-->
  <view class="main_section">
    <!--    会议背景图-->
    <view class="section_1">
      <image v-if="(infoData.meetingSubjectHasOne.img || '')" class="pic" mode="aspectFill" :src="$util.img(infoData.meetingSubjectHasOne.img)"></image>

      <image v-else class="pic" mode="aspectFill" src="@/static/test/beijing.jpeg"></image>
    </view>

    <view class="title_section">
      <view class="title">
        {{infoData.meetingHotelHasOne.name || ''}}
      </view>
    </view>
    <view class="section_2">
<!--      <view class="content" v-html="html"></view>-->
    </view>

    <view class="section_3" v-if="!(infoData.meetingHotelHasOne.id || '')">
      <view class="content">等待管理员安排入住中...</view>
    </view>

    <view class="ul" v-else>
      <view class="li">
        <view class="box">
          <view class="title">联系电话</view>
          <view class="content">{{infoData.meetingHotelHasOne.tel || ''}}</view>
        </view>
        <view class="btn" v-if="(infoData.meetingHotelHasOne.tel || '')" @click="callPhone(infoData.meetingHotelHasOne.tel)">打电话</view>
        <view class="btn" v-else></view>
      </view>

      <view class="li">
        <view class="box">
          <view class="title">酒店地址</view>
          <view class="content">{{infoData.meetingHotelHasOne.address_name || ''}} {{infoData.meetingHotelHasOne.address}}</view>
        </view>
        <view class="btn" v-if="(infoData.meetingHotelHasOne.lng || '') && (infoData.meetingHotelHasOne.lat || '')" @click="startNavigation(infoData.meetingHotelHasOne.lng || '',infoData.meetingHotelHasOne.lat || '',infoData.meetingHotelHasOne.lat.address || '')">去导航</view>
      </view>

      <view class="li">
        <view class="box">
          <view class="title">入住时间</view>
          <view class="content">{{infoData.start_time || ''}} ~ {{infoData.end_time || ''}}</view>
        </view>
        <view class="btn"></view>

      </view>

      <view class="li">
        <view class="box">
          <view class="title">姓名</view>
          <view class="content">{{infoData.meetingAppointmentHasOne.name || ''}}</view>
        </view>
        <view class="btn"></view>
      </view>

      <view class="li">
        <view class="box">
          <view class="title">房间号</view>
          <view class="content">{{infoData.room_num || ''}}</view>
        </view>
        <view class="btn"></view>
      </view>
    </view>


  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  data() {
    return {
      meetingSubjectId:'',//会议主题id

      infoData:{},

      html: `
        国家会展中心上海洲际酒店坐落于大型建筑单体和会展综合体——国家会展中心（上海）内，是中心内的一家奢华品牌酒店，也是蓬勃发展的上海虹桥商务区奢华体验新标杆`
    }
  },
  onLoad(options) {
    if (options.meetingSubjectId) {
      this.meetingSubjectId = options.meetingSubjectId
    }
  },
  onShow() {
    this.init()
  },
  methods: {
    async init(){
      await this.getHotelMeetingInfo()
    },

    //获取会议子表信息
    async getHotelMeetingInfo(){
      let params = {
        meeting_subject_id:this.meetingSubjectId
      }
      let res = await apiRoute.getHotelMeetingInfo(params)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.infoData = res.data
      console.log(123123,this.infoData)
    },

    //点击拨打电话
    callPhone(tel){
      uni.makePhoneCall({
        phoneNumber: tel
      });
    },

    //去导航
    startNavigation(lng,lat,name){
      uni.openLocation({
        latitude: parseFloat(lat),
        longitude: parseFloat(lng),
        name: name,
        // address: address,
        success: () => {
          console.log('成功打开地图导航');
          uni.showToast({
            title: '导航已启动',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('打开地图导航失败:', err);
          uni.showToast({
            title: '导航失败',
            icon: 'none'
          });
        }
      });
    }


  }
}
</script>

<style lang="less" scoped>
.main_section{
  padding-bottom: 40rpx;
  .section_1{
    padding-top: 20rpx;
    .pic{
      width: 100%;
      height: 350rpx;
    }
  }
  .title_section{
    padding: 20rpx;
    .title{
      font-size: 40rpx;
      color: #2a82e4;
    }
  }
  .section_2{
    padding: 0 20rpx;
  }

  .section_3{
    margin-top: 80rpx;
    .content{
      font-size: 35rpx;
      text-align: center;
    }
  }

  .ul{
    padding: 0 20rpx;
    margin-top: 80rpx;
    display: flex;
    flex-direction: column;
    gap: 25rpx;
    .li{
      font-size: 30rpx;
      display: flex;
      justify-content: space-between;
      .box{
        width: 100%;
        display: flex;
        gap: 15rpx;
        .title{
          width: 160rpx;
        }
        .content{
          width: 80%;
        }
      }
      .btn{
        text-align: right;
        width: 140rpx;
        color: #2a82e4;
      }
    }
  }


}
</style>
